<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
  />
  <meta name="format-detection" content="telephone=no">
  <title>颐和墙纸</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <!-- Swiper -->
  <link rel="stylesheet" href="./css/swiper-3.4.2.min.css">
  <link rel="stylesheet" href="./css/animate.min.css">
  <link rel="stylesheet" type="text/css" href="./css/ct.css" />
  <style type="text/css">
    body {
      background: url(./image/bg.png) no-repeat center;
      height: 100%;
      width: 100%;
      margin: auto;
    }
    img {
      width: 100%;
      height: auto;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .fl {
      float: left;
    }
    .fr {
      float: right;
    }
    /*清除浮动代码*/ 
    .cl:after{
      display:block;
      clear:both;
      content:"";
      visibility:hidden;
      height:0
    } 
    .cl {
      zoom:1
    }
    .relative {
      position: relative;
      z-index: 99;
    }
    .center-middle {
      justify-content:center;
      align-items:center;
      display:-webkit-flex;
    }
    .text-center {
      text-align: center;
    }
    .f30 {
      font-size: 30px;
    }
    .f15 {
      font-size: 15px;
    }
    .block {
      display: block;
    }
    .m30 {
      margin: 30px;
    }
    .w50 {
      width: 50%;
    }
    .pd3 {
      padding: 3px;
    }
    .pd10 {
      padding: 10px;
    }
    .pd20 {
      padding: 20px;
    }
    .bgWhite {
      background-color: #fff;
    }
    .bgBlue {
      background-color: rgb(13, 50, 105);
    }
    .h100 {
      height: 100%;
    }
    .h80 {
      height: 80%;
    }
    .h20 {
      height: 20%;
    }
    .h-inherit {
      height: inherit;
    }
    .bg-transparent {
      background-color: transparent;
    }
    .bg-white {
      background-color: #fff;
    }
    .col-transparent {
      color: transparent;
    }
    .col-orange {
      color: rgba(255, 82, 0 , 1);
    }
    

    .intro {
      letter-spacing: 3px;
    }
    section {
      position: relative;
    }

    .section0-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background: url(./image/03/03_2.jpg) no-repeat center;
      z-index: 1;
    }
    .section0-1 {
      position: relative;
      top: 0;
      width: 100%;
      z-index: 2;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      background-color: transparent;
    }
    .section0-1 .section0-wrap {
      padding: 20px 0;
      background-color: rgba(255,255,255,.9);
    }
    .section0 .bg-frame {
      content: ' ';
      position: fixed;
      top: 0;
      top: 80%;
      left: 0;
      right: 0;
      bottom: 0;
      /* height: 100%; */
      background-color: rgba(255,255,255,1);
    }
    .section0-1-bg {
      content: '';
      position: absolute;
      top: 0;
      /* top: 80%; */
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      background-color: rgba(255,255,255,.9);
    }
    .section2 .title {
      font-size: 16px;
      position: absolute;
      top: 50px;
      left: 0;
      right: 0;
      padding: 0 30px;
    }

    .icon-plus {
      position: absolute;
      right: 20px;
      top: 20px;
      padding: 0;
      margin: 0;
      border-radius: 50%;
      background-color: #fff;
      overflow: hidden;
      text-align: center;
      width: 30px;
      height: 30px;
      z-index: 444;
    }
    .icon-plus span {
      display: block;
      margin-top: 3px;
      border-radius: 50%;
      color: #000;
      font-size: 23px;
    }
    .frame-box {
      border: 2px dashed orange;
      background-color: #fff;
      position: absolute;
      top: 30%;
      left: 10%;
      right: 10%;
      padding: 20px;
      max-height: 400px;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }
  </style>
</head>

<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <section class="swiper-slide section0">
        <div class="section0-bg h80"></div>
        <div class="bg-frame h20"></div>
        <div class="white-item section0-1 ani h100 bg-white" swiper-animate-effect="fadeInUp">
          <div class="relative section0-wrap">
            <header class="">
                <i class="block text-center f30 fa fa-arrow-circle-down icon-down"></i>
                <p class="f30 text-center">忆情系列墙纸</p>
                <p class="text-center">ART SUNNY SERIES OF WALLPAPER</p>
              </header>
    
              <p class="m30 f15 intro">
                生活，需要去拼搏；卧室，是放松身心的地方；
                不一样的家居风格设计，会给人带来不一样的
                享受，生活在于品味。
              </p>
              <p class="m30 f15 intro">
                打造北欧风格的外衣  对于北欧设计来说，最重要
                的是不“卖”，而是创造使用、经久不衰且性价比高
                的产品；简约直接，贴近自然，没有多余的奢华装饰。
                正是时下最流行的，也是年轻人最爱的设计元素        
              </p>
    
              <div class="text-center">
                <img src="./image/03/03_3.jpg" alt="">
              </div>
    
              <div class="m30 cl text-center center-middle">
                <div class="fl w50 ">
                  <p class="f30 text-center">防水</p>
                </div>
                <div class="fl w50">
                  <img src="./image/03/03_1.jpg" alt="">
                </div>
              </div>
              <div class="m30 text-center">
                <p class="f15">它无惧风雨，潜能无限，无论是被水撒在上面、被胶水粘到，只需用抹布轻轻一擦，即可抹掉，不留痕迹，具有防尘防水性能。</p>
              </div>
    
              <div class="m30 cl text-center center-middle">
                <div class="fl w50">
                  <img src="./image/03/03_4.jpg" alt="">
                </div>
                <div class="fl w50 ">
                  <p class="f30 text-center">防尘</p>
                </div>
              </div>
              <div class="m30 text-center">
                <p class="f15">它能够抵御灰尘、水滴，随时随地，无拘无束使用</p>
              </div>
          </div>
        </div>
      </section>
      <section class="swiper-slide section1 bg-white">
        <div class="bgBlue pd3 h80">
          <div class="bgWhite pd10 h100">
            <img class="h-inherit" src="./image/03/03_2.jpg" alt="">
          </div>
        </div>
        <div class="bgWhite pd20 center-middle h20">
          生活，需要去拼搏；卧室，是放松身心的地方；
          不一样的家居风格设计，会给人带来不一样的
          享受，生活在于品味。
        </div>
      </section>
      <section class="swiper-slide section2" onclick="setDom(this, event, '.section2')">
        <img class="h-inherit" src="./image/03/03_2.jpg" alt="">
        <div class="icon-plus" onclick="setDom(this, event, '.section2', 1)">
          <span class="fa fa-plus "></span>
        </div>
        <p class="title intro col-orange">
          生活，需要去拼搏；卧室，是放松身心的地方；
          不一样的家居风格设计，会给人带来不一样的
          享受，生活在于品味。
        </p>
        <div class="frame-box relative" style="display: none;">
          <p>生活，需要去拼搏；卧室，是放松身心的地方；
          不一样的家居风格设计，会给人带来不一样的
          享受，生活在于品味。生活，需要去拼搏；卧室，是放松身心的地方；
          不一样的家居风格设计，会给人带来不一样的
          享受，生活在于品味。生活，需要去拼搏；卧室，是放松身心的地方；
          不一样的家居风格设计，会给人带来不一样的
          享受，生活在于品味。生活，需要去拼搏；卧室，是放松身心的地方；
          不一样的家居风格设计，会给人带来不一样的
          享受，生活在于品味。生活，需要去拼搏；卧室，是放松身心的地方；
          不一样的家居风格设计，会给人带来不一样的
          享受，生活在于品味。</p>
        </div>
      </section>
    </div>
  </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="./js/swiper-3.4.2.jquery.min.js"></script>
<script src="./js/swiper.animate1.0.2.min.js"></script>
<script type="text/javascript">
  var readyArr = [];
  var scrollReveal;

  function animationInit(parentDom) {
    // console.log(parentDom)
    // var config = {
    //   elem: document.getElementById(parentDom),
    // };
    // new scrollReveal(config);
    // return;

    var wow = new WOW({
      boxClass: parentDom + ' .wow',
      animateClass: 'animated',
      offset: 0,
      reset: true,
      mobile: true,
      live: true,
    });
    wow.init();
  }
  function pushItem(index) {
    for(var i=0;i<readyArr.length;i++) {
      if(readyArr[i] == index) {
        return true;
      }
    }
    readyArr.push(index);
    return false;
  }

  function setDom(_this, e, dom, flag) {
    e.stopPropagation();
    if(!$(dom)) return;
    if(flag) {
      $(dom).find('.frame-box').show();
      $(dom).find('.zhe-frame').show();
      $(this).hasClass('.icon-plus') ? $(this).hide() : $(dom).find('.icon-plus').hide();
      return;
    }
    $(dom).find('.frame-box').hide();
    $(dom).find('.zhe-frame').hide();
    $(this).hasClass('.icon-plus') ? $(this).hide() : $(dom).find('.icon-plus').show();
  }

  $(function () {
    $('.section0-1').css('padding-top', $('body').height() - $('.section0 .bg-frame').height() + 'px');

    var mySwiper = new Swiper('.swiper-container', {
      initialSlide: 0,
      onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
        swiperAnimateCache(swiper); //隐藏动画元素 
        swiperAnimate(swiper); //初始化完成开始动画
        pushItem(swiper.activeIndex);
      }, 
      onSlideChangeEnd: function(swiper){
        console.log(swiper.activeIndex);
        swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
      } 
    });
  })
</script>

</html>